<template>
  <div class="content">
    <div class="search">
      <input type="search" placeholder="请输入游戏名或英文名" />
      <img src="#" alt="" />
    </div>
    <div class="cancle" @click="goback()">取消</div>
    <div class="history">
      <h2>搜索历史<img src="#" /></h2>
      <ul>
        <li>1212</li>
        <li>1212</li>
      </ul>
    </div>
    <div class="hot">
      <h2>热门搜索<img src="#" /></h2>
      <ul>
        <li>gta5</li>
        <li>血缘诅咒</li>
        <li>怪物猎人</li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="less" scoped>
@import "@/style/index.less";
.content {
  .margin(0,18,0,12);
  .search {
    display: inline-block;
    .width(296);
    .height(30);
    .line-height(30);
    .margin(15,0,15,0);
    background-color: #f4f5f6;
    border-radius: unit((35/37.5), rem);
    img {
      .width(15);
      .height(15);
      float: right;
      .margin(3,15,0,0);
    }
    input {
      background-color: #f4f5f6;
      .fontSize(12);
      font-weight: 500;
      .margin(0,0,0,18);
      color: #959596;
    }
  }
  .cancle {
    display: inline-block;
    .margin(0,0,0,20);
  }
  .history {
    h2 {
      .fontSize(16);
      img {
        float: right;
      }
    }
    ul {
      display: flex;
      justify-content: flex-start;
      .margin(15,0,25,0);
      li {
        .fontSize(10);
        .padding(8,15,8,15);
        .margin(0,10,0,0);
        border-radius: unit((15/37.5), rem);
        background-color: #f6f6f6;
      }
    }
  }
  .hot {
    h2 {
      .fontSize(16);
      .margin(0,0,21,0);
    }
    ul {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      li {
        display: inline-block;
        width: 50%;
        .margin(0,0,25,0);
      }
    }
  }
}
</style>
